<template>
  <div class="navbar">
    <div class="title">
      <div class="content" >
        <img src="@/assets/app/title.png" alt="">
      </div>
      <div style="display:flex;align-items: center;" >
        <div ><el-select v-model="role" class="roleselect" @change="handleChange">
          <el-option v-for="item in options" :key="item.tenantId" :value="item.tenantId" :label="item.name"></el-option>
          </el-select></div>
        <div class="help">
          <div>
            <img src="@/assets/app/icon_help.png" alt="">
          </div>
          <div style="padding:0 5px">帮助</div>
        </div>
        <div> <img src="@/assets/app/user.png" alt=""> </div>
        <div class="name">{{username}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import {  getInfo,getInfoById,getTenantRoleAppByUserId } from '@/api/user'
export default {
  data(){
    return{
      options:[],
      role:null,
      type:null
    }
  },
  computed: {
    username(){
      return this.$store.getters.name
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo(){
      getInfo(this.$store.getters.name).then(res=>{
        // console.log(res.data.id)
        this.$store.dispatch('user/setUser', res.data.id)
        getTenantRoleAppByUserId(res.data.id).then(result=>{

          this.options=result.data
          this.type=res.data.type
          if(result.data.length>0){
            this.role=result.data[0].tenantId
          }
          this.$emit('callbackrole',Object.assign(result,{type:res.data.type}))

        })

      })
    },
    handleChange(val){
      this.$emit('changrole',val)
    }
  },
}
</script>
<style lang="scss" scoped>
.navbar{
  background: #1D62C7;
  height: 72px;
  padding: 0 20px;
  .title{
    display: flex;align-items: center;height:100%;justify-content: space-between;
    border-bottom:1px solid #5c88ca;
  }
  .content{
    width: 317px;
    height: 46px;
  }
  .help{
    display: flex;
    padding: 0 80px;
    /* width: 200px; */
    cursor: pointer;
    color: #8CAEE2;
  }
  .name{
    color: #FFFFFF;
    padding: 0 20px;
  }
}
</style>
<style>
/* .xselect>>>input{
	background: #3E7DF4 !important;
    color: #FFFFFF;
    border: 0;
} */
.roleselect .el-input__inner{
  	background: #3E7DF4 !important;
    color: #FFFFFF;
    border: 0;
}
</style>
